
<script>
	// 数据详情页
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		components: {  },
		name: 'WeworkQrList'
	})
</script>
<script setup>
import Detail1 from '@/pages/wework/customer/detail/index.vue'
import * as echarts from 'echarts'
import {dateTypes} from '@/utils'
import { reqGroupDetailStaffTable } from '@/api'
import MyIcon from '@/components/my-icon/index.vue'
	import { ref,onMounted } from 'vue'
	import {reqQrTable} from '@/api'
	import { toRaw } from '@vue/reactivity'
	import ChooseDialogue from '@/components/app/chooseDialogue.vue'
	import { Search } from '@element-plus/icons-vue'
const isRefresh = ref(true)
const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}
const dialogVisible = ref(false)
const detail1 = ref(null)

const showDetail = (id)=>{
	emits('showDetail',id)
}
const showStaffDetail = (id)=>{
	emits('showStaffDetail',id)
}

const emits = defineEmits(['showDetail','showStaffDetail'])
const selfTime = ref([])

const dateTypeList = ref([])
dateTypeList.value = dateTypes
const total = ref(0)
const queryForm = ref({
	 chat_id:'',
    "type":1,
    "date_type":"day",
    "ktime":"",
    "dtime":"",
		"name":'',
		page:1,
		size:20
})
const show = (id)=>{
	queryForm.value.chat_id = id
	reqQrTableData()
}
	const reqQrTableData = async(val)=>{
		if (val) queryForm.page = val
		if (selfTime.value){
		if (selfTime.value.length==2){
			queryForm.value.ktime = selfTime.value[0]
			queryForm.value.dtime = selfTime.value[1]
		}else{
			queryForm.value.ktime =''
			queryForm.value.dtime = ''
		}
	}else{
		queryForm.value.ktime =''
		queryForm.value.dtime = ''
	}
	
	const r = await reqGroupDetailStaffTable(queryForm.value)
	
		if(r){
			if(queryForm.value.type==1){
				tableData.value = r.data.item
				total.value = r.data.count
			}else{
				tableData.value = r.data
			}
			
			
		}
	}

	const tableData = ref([])

	const exportExcel = () => {
		console.log('导出excel')
	}
	const detail = ref()
	const showDetailDialogue = (val) => {
		console.log('查看详情')
		detail.value.show(val)
	}
	defineExpose({
	show
})
  
</script>

<template>
	<div class="app-edit app-gap-block">
    <div class="app-container">
			<div class="table-title app-flex-left">表格数据</div>
      <div class="app-gap-block-top">
				<div class="app-flex-2">
					<div>
						<el-radio-group v-model="queryForm.type" @change="reqQrTableData(1)" size="large">
      
      <el-radio-button :label="1" >按成员查看</el-radio-button>
			<el-radio-button :label="2" >按日期查看</el-radio-button>
		</el-radio-group>
		<el-divider v-if="queryForm.type==1" direction="vertical" /><span v-if="queryForm.type==1">共{{total}}位成员</span>
		</div>
		<div>
				<!-- <el-button class="app-btn" @click="exportExcel">导出Excel</el-button> -->
		</div>

				</div>
				<div class="app-gap-block-top app-flex-left">
					<el-input
					style="width:200px;margin-right:20px"
							v-if="queryForm.type==1"
							v-model="queryForm.name"
							class="cho-item-width"
							size="large"
							@input="(val)=>reqQrTableData(1)"
							placeholder="请输入成员名称"
							clearable
							:suffix-icon="queryForm.name.length == 0 ? SearchSearch : ''"
						/>
					<!-- <el-select v-model="queryForm.date_type" @change="reqQrTableData" class="m-2" placeholder="请选择" size="large">
						<el-option v-for="(item, index) in dateTypeList" :key="index" :label="item.title" :value="item.name" />
					</el-select>
					<span v-if="queryForm.date_type=='self'" class="app-gap-words-left app-select-right">自定义：</span> -->
					<el-date-picker
					style="max-width:300px"
					@change="(val)=>reqQrTableData(1)"
						v-model="selfTime"
						type="daterange"
						value-format="YYYY-MM-DD"
						format="YYYY-MM-DD"
						range-separator="~"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						size="large"
					/>
					<!-- <span class="app-gap-words-left app-select-right">选择员工：</span>
					<span v-if="isRefresh">
  <span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-if="staffData.length>2">
    <span class="app-flex-left">
      <el-avatar v-if="staffData[0].avatar" class="cho-margin" shape="square" :size="30" :src="staffData[0].avatar" />
      <span>{{ staffData[0].name }}等{{staffData.length}}个账号</span>
    </span>
    <el-icon>
      <ArrowDown />
    </el-icon>
  </span>
  <span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-else>
    <span class="app-flex-left" v-for="(item,index) in staffData" :key="index">
      <el-avatar v-if="item.avatar" class="cho-margin" shape="square" :size="30" :src="item.avatar" />
      <span>{{ item.name }}</span>
    </span>
    <span v-if="staffData.length==0">请选择</span>
    <el-icon>
      <ArrowDown />
    </el-icon>
  </span>
</span> -->
<!-- <ChooseDialogue :dialogVisible="dialogVisible" @getChooseData="getChooseData($event, val)" ref="chooseDialogue" /> -->
				</div>
			 

<div class="app-gap-block-top">
					<el-table class="app-select-table app-container-radius" :data="tableData" style="width:100%">
						<el-table-column v-if="queryForm.type==1" label="全部成员" align="left">
							<template #default="scope">
								<div class="app-flex-left">
							<el-avatar v-if="scope.row.user" class="cho-margin" shape="square" :size="30" :src="scope.row.user.avatar" />
							<span v-if="scope.row.user" class="app-gap-words-left">
								{{ scope.row.user.name }}
							</span>
						</div>
							</template>
						</el-table-column>
						<el-table-column label="类型" align="left" v-if="queryForm.type==1">
							<template #default="scope">
							{{scope.row.type==1?'企业成员 ':'外部联系人'}}
							</template>
							</el-table-column>
						<el-table-column prop="join_time" label="入群时间" align="left" v-if="queryForm.type==1" />
						<el-table-column label="入群方式" align="left" v-if="queryForm.type==1">
							<template #default="scope">
							{{scope.row.join_scene==1?' 由群成员邀请入群（直接邀请入群）':scope.row.join_scene==2?'由群成员邀请入群（通过邀请链接入群）':'通过扫描群二维码入群'}}
							</template>
						</el-table-column>


						<el-table-column label="邀请员工" align="left" v-if="queryForm.type==1">
							
						<template #default="scope">
							<div class="app-words-box">
										<div class="app-flex-left">
											<MyIcon class="app-down-icon primary-font" name="Person" />
											<span v-if="scope.row.invitor" class="app-gap-words-left-xs">{{ scope.row.invitor
.name }}</span>
										</div>
									</div>
						</template>
					</el-table-column>
					<el-table-column prop="unionid" label="unionid" align="left" v-if="queryForm.type==1"></el-table-column>
					<el-table-column label="操作" align="right" v-if="queryForm.type==1">
						<template #default="scope">
							<div v-if="scope.row.type==1" class="app-primary-font" @click="showStaffDetail(scope.row.user.id)">员工详情</div>
							<div v-else class="app-primary-font" @click="showDetail(scope.row.user.id)">客户详情</div>	
						</template>
					</el-table-column>
						
					
					<el-table-column prop="time" label="日期" align="left" v-if="queryForm.type==2" />
						<el-table-column align="left" v-if="queryForm.type==2">
						<template #header>
							<div class="app-flex-left">
								<span class="">总人数</span>
							</div>
						</template>
						<template #default="scope">
							{{ scope.row.size}}
						</template>
					</el-table-column>
						<el-table-column align="left" v-if="queryForm.type==2">
						<template #header>
							<div class="app-flex-left">
								<span class="">新增人数</span>
								
							</div>
						</template>
						<template #default="scope">
							{{ scope.row.add_size}}
						</template>
					</el-table-column>
						<el-table-column align="left" v-if="queryForm.type==2">
						<template #header>
							<div class="app-flex-left">
								<span class="">流失人数</span>
							</div>
						</template>
						<template #default="scope">
							{{ scope.row.del_size }}
						</template>
					</el-table-column>
						<!-- <el-table-column label="操作" align="right">
						
						<template #default="scope">
							<span class="primary-font app-pointer" @click="showDetailDialogue(scope.row)">查看详情</span>
						</template>
					</el-table-column> -->
					</el-table>

					<el-pagination v-if="queryForm.type==1" style="margin-top:10px;margin-bottom:10px" :current-page="queryForm.page" class="app-page" @current-change="reqQrTableData" background layout="prev, pager, next" :total="total" />
			</div>
			</div>
		
			
    </div>
    
	<div>
</div>

</div>


</template>
<style lang="scss">
	@import url('../../../../../style/app-component.scss');
</style>